<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { v4 as uuid } from 'uuid'
import useUserStore from '@/stores/user'
import { computed, onMounted, ref } from 'vue'
import useSystemStore from '@/stores/system'
const router = useRouter()

console.log('env', import.meta.env)
const oaAuth = () => {
  const clientID = import.meta.env.VITE_CLIENT_ID
  const redirectURL = import.meta.env.VITE_REDIRECT_URL

  const searchQuery = new URLSearchParams()
  searchQuery.append('response_type', 'code')
  searchQuery.append('scope', 'read')
  searchQuery.append('client_id', clientID)
  searchQuery.append('redirect_uri', redirectURL)
  searchQuery.append('state', uuid())

  const url = import.meta.env.VITE_OA_API
  console.log(searchQuery.toString())

  location.href = url + '?' + searchQuery.toString()
}

const store = useUserStore()
const systemStore = useSystemStore()
const route = useRoute()
const oaLogin = async (code: string, state: string) => {
  if (code && state) {
    await store.login(code, state)
    console.log('systemStore', systemStore.redirectUrl)
    router.replace(systemStore.redirectUrl || '/')
    ElMessage.success('欢迎使用')
    systemStore.redirectUrl = ''
  }
}

const init = () => {
  const { code, state } = route.query as any
  if (code && state) {
    oaLogin(code, state)
  } else {
    oaAuth()
  }
}
init()

const circleStep = ref(0)
const circlePer = computed(() => {
  return (circleStep.value / 100) * 360 + 'deg'
})
function circleAnimate() {
  if (circleStep.value > 100) {
    return
  }
  circleStep.value += 2.5
  requestAnimationFrame(circleAnimate)
}

onMounted(() => {
  circleAnimate()
})
</script>

<template>
  <div class="w-screen h-screen flex">
    <div class="left">
      <div class="logo">
        <img class="w-[35px]" :src="$c.logo" alt="logo" />
        <span class="ml-5 text-xl">{{ $c.title }}</span>
      </div>
      <div>
        <h1 class="text-center text-white text-xl">{{ $c.title }}</h1>
        <h2 class="text-center text-base text-gray-400 mt-4">
          {{ $c.description }}
        </h2>
        <img class="w-[320px]" :src="$c.loginImage" alt="loginImage" />
      </div>
    </div>
    <div class="right">
      <div class="flex flex-col items-center gap-4">
        <h1 class="text-center text-2xl">使用OA安全登录</h1>
        <div
          class="login-circle w-[180px] h-[180px] bg-[#00308f] rounded-full flex justify-center items-center text-white text-xl font-bold cursor-pointer"
          @click="oaAuth"
        >
          OA授权登录中
          <div class="progress-circle level1"></div>
          <div class="progress-circle level2"></div>
        </div>
        <p class="text-center">
          下载
          <a class="text-[#00308f]" href="https://guanjia.tcent.cn/" target="_blank">同程管家APP</a>
          ，连接VPN,快速登录
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 550px;
  background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
  .logo {
    position: fixed;
    top: 24px;
    left: 22px;
    z-index: 1;
    display: flex;
    align-items: center;
    color: #fff;
  }
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  .login-circle {
    position: relative;
    &::after {
      content: '.';
      position: absolute;
      bottom: calc(50% - 15px);
      left: 155px;
      animation: dot 2s infinite steps(3, start);
      z-index: 10;
    }
    .progress-circle {
      position: absolute;
      width: 105%;
      height: 105%;
      background-color: #fff;
      border-radius: 100%;
      z-index: -1;
    }
    .level2 {
      z-index: -2;
      width: 115%;
      height: 115%;
      background: conic-gradient(
        #00308f 0,
        #00308f v-bind(circlePer),
        transparent v-bind(circlePer),
        transparent 100%
      );
    }
  }
}

@keyframes dot {
  33.33% {
    content: '.';
  }
  66.66% {
    content: '..';
  }
  100% {
    content: '...';
  }
}
</style>
